<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="js/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.min.js"></script>
  <script src="js/jquery-ui.min.js"></script>
  
  <script>
  $(document).ready(function() {
    $("#datepicker").datepicker({ onSelect: function(dateText, inst) { execWs(dateText); } });
    $('#MyBookings').hide(); 
  });
  function execWs(dateText){
	  //alert(dateText);


	  var requestUrl ="rest/book/free?when="+dateText;            
      $.getJSON(requestUrl,
      function(data) {
    	  $('option', $('#slots')).remove()
    	  //alert(data[1].slot.from );    
    	  //$('#slots').append('<option value="'+data[0].slot.id+'" >'+data[0].slot.from+'-'+data[0].slot.to+'</option>');
          for(var i=0;i<data.length;i++){   
        	      	  
        	  $('#slots').append('<option value="'+data[i].slot.id+'" >'+data[i].slot.from+'-'+data[i].slot.to+' ( '+data[i].count+' )'+'</option>');     	
         }
          if(data.length==0){
        	  $('#slots').append('<option value="-1" >No free slots</option>');
          }
                	                                            
      });
     
  }

  function bookASlot(){
	  var emp=$('#empId').val();
	  //alert(emp);
	  var slot=$('#slots').val();
	  var dtText =$("#datepicker").val();
	  //alert($("#datepicker").val());
	  var requestUrl ="rest/book/bookslot?dt="+dtText;
	  requestUrl+="&slot="+slot+"&emp="+emp;
	  $.getJSON(requestUrl,function(data){ 
				alert(" Machine id Booked : "+data.id)
				execWs(dtText);
		  });
  }

  function getMyBookings(){	  
	  $('#MyBookings').show();
	  
	  var requestUrl ="rest/book/bookings?eId="+$('#empId').val();
	  $.getJSON(requestUrl,function(data){ 
		if(data.length!=0){
			$('#MyBookings').html('<table border="1" id="bookingDetails"><tr><td align="center" valign="middle" > <b> Date </b></td><td align="center" valign="middle" > <b> From </b> </td><td align="center" valign="middle" > <b> To </b> </td><td align="center" valign="middle" > <b> Machine </b> </td></tr></table>');
		  	for(var i=0;i<data.length;i++){
				  $('#bookingDetails tr:last').after(" <tr> <td>"+data[i].date+" </td> <td> "+data[i].slot.from+" </td><td> "+data[i].slot.to+ "</td><td>"+data[i].machineId+"</td>");	   
		  	}
		}
		else{
			$('#MyBookings').html('No Reservations found!');
		}
			
			//execWs($("#datepicker").val());
	  });
	   
	   //alert("hi");
  }
	  
  </script>
</head>
<body style="font-size:62.5%;">  
<table border="0" > 
	<tr>
		<td colspan="2" align="center" valign="bottom" height="200px" ><div id="datepicker" ></div></td>		
		<td align="center" valign="top" width="200px">
		<a onclick="getMyBookings();" href="javascript:void();" > <b>My Bookings </b> </a>
			<div id="MyBookings" style="overflow:auto;height:190px;">
				
			</div> 
		</td>
	</tr>
	<tr>
		<td width="180px" align="center" valign="top"> 
			<select id="slots" name="slots" >
				<option value="-1">No date selected </option>
			</select> 
		</td>
		<td align="center" valign="top"><button id="book" onclick="bookASlot();" > Book slot </button></td>
		<td align="left" valign="top" width="180px">
			<input type="text" id="empId"  />	
			<a id="animate"  onclick="$('#empId').slideToggle();" href="javascript:void();"> EmpId</a>		  			
		</td>		
	</tr> 
</table>
</body>
</html>